<template>
	<div>
		<div class="search">
			<input v-model="keyword" type="text" placeholder="输入城市名或拼音" class="search-input">
		</div>
		<div class="search-content" ref="search" v-show="keyword">
			<ul>
				<li class="search-item border-bottom" v-for="item of list" :key="item.id">
					{{item.name}}
				</li>
				<li class="search-item border-bottom" v-show="!list.length">
					没有找到匹配数据
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default {
		name : 'CitySearch' ,
		props:{
			citys:Object,
		},
		data () {
			return {
				keyword : '',
				list : [],
				timer : null
			}
		},
		watch :{
			keyword () {
				if (this.timer){
					clearTimeout(this.timer)
				}
				if(!this.keyword){
						this.list = []
						return
				}
				this.timer = setTimeout(() => {
					const result = []
					for (let i in this.citys) {
						this.citys[i].forEach((value) => {
							if(value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1){
								result.push(value)
							}
						})
					}
					this.list = result;
				},100)
			}
		},
		mounted:function(){
			this.scroll = new BScroll(this.$refs.search)
		}
	}
	
</script>

<style scoped lang="stylus"  rel="stylesheet/stylus">
	@import '~styles/varibles.styl'
	
	.search
	 height:.72rem
	 padding:0 .1rem
	 background:$bgColor
	 .search-input
	  width:100%
	  height:.62rem
	  line-height:.62
	  text-align:center
	  color:#666
	  padding:0 .1rem
	  box-sizing:border-box	  
		border-radius:.06rem
	.search-content
	 overflow:hidden
	 position:absolute
	 top:1.58rem
	 left:0
	 right:0
	 bottom:0
	 z-index:1
	 background:#eee
	 .search-item
	  line-height:.62rem
		padding-left:.2rem
		color:666
		background:#fff
	
</style>